<template>
    <div id="parts">
        <el-button @click="insertList" class="slot-btn-top" type="primary" size="small">添加</el-button>
        <el-table  :data="dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border
                  class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="productgs" label="产品名称" sortable min-width="220"></el-table-column>
            <el-table-column prop="totalgs" label="总成归属" sortable min-width="130"></el-table-column>
            <el-table-column prop="usegs" label="使用归属" sortable min-width="100"></el-table-column>
            <el-table-column prop="typeattribute" label="种类属性" sortable min-width="100"></el-table-column>
            <el-table-column prop="managelevel" label="管理等级" sortable min-width="100"></el-table-column>
            <el-table-column prop="name" label="物料名称" sortable min-width="160"></el-table-column>
            <el-table-column prop="unitprice" label="执行单价" sortable min-width="120"></el-table-column>
            <el-table-column prop="unitpricerange" label="单价范围" sortable min-width="120"></el-table-column>
            <el-table-column prop="qualitysum" label="质保金" sortable min-width="120"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteList(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper" :total="dataList.length"></el-pagination>

        <!-- 详情信息 -->
        <el-dialog title="详细信息" width="80%" top="30px" :visible.sync="isDialog" :close-on-click-modal="false">
            <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-bottom: 15px;">
                <el-tab-pane label="任务信息" name="1" :style="dialogHeightPane" class="dialog1">
                    <el-form :inline="true" class="demo-form-inline" v-model="dialogList" label-position="right" label-width="130px">
                        <el-form-item label="产品名称"><el-input v-model="dialogList.productgs"></el-input></el-form-item>
                        <el-form-item label="物料代码"><el-input v-model="dialogList.productcode"></el-input></el-form-item>
                        <el-form-item label="物料用途">
                            <el-select v-model="dialogList.productuse">
                                <el-option label="耗材生产" value="0"></el-option>
                                <el-option label="机器生产" value="1"></el-option>
                                <el-option label="配套" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="总成归属"><el-input v-model="dialogList.totalgs" ></el-input></el-form-item>
                        <el-form-item label="使用归属"><el-input v-model="dialogList.usegs"></el-input></el-form-item>
                        <el-form-item label="种类属性"><el-input v-model="dialogList.typeattribute"></el-input></el-form-item>
                        <el-form-item label="管理等级"><el-input v-model="dialogList.managelevel"></el-input></el-form-item>
                        <el-form-item label="采协方式"><el-input v-model="dialogList.xcway"></el-input></el-form-item>
                        <el-form-item label="协作类型"><el-input v-model="dialogList.xztype"></el-input></el-form-item>
                        <el-form-item label="生产用量额定"><el-input v-model="dialogList.productnums"></el-input></el-form-item>
                        <el-form-item label="计量单位"><el-input v-model="dialogList.measureunit" ></el-input></el-form-item>
                        <el-form-item label="物料名称"><el-input v-model="dialogList.name" ></el-input></el-form-item>
                        <el-form-item label="规格型号"><el-input v-model="dialogList.type" ></el-input></el-form-item>
                        <el-form-item label="执行单价"><el-input v-model="dialogList.unitprice" ></el-input></el-form-item>
                        <el-form-item label="单价范围"><el-input v-model="dialogList.unitpricerange"></el-input></el-form-item>
                        <el-form-item label="质保金"><el-input v-model="dialogList.qualitysum" ></el-input></el-form-item>
                        <el-form-item label="开票类型"><el-input v-model="dialogList.kptype"></el-input></el-form-item>
                        <el-form-item label="开票方式"><el-input v-model="dialogList.kpway" ></el-input></el-form-item>
                        <el-form-item label="创建人"><el-input v-model="dialogList.createpersonName" disabled></el-input></el-form-item>
                        <el-form-item label="创建时间"><el-input v-model="dialogList.createtime" disabled></el-input></el-form-item>
                    </el-form>
                    <div style="text-align: right">
                        <el-button @click="submitList" type="primary">确 定</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane v-if="dialogTitle !== '添加'" label="过程状态信息" name="2" :style="dialogHeightPane">
                    <el-button @click="insertProcessStateList" type="primary" size="small">新增</el-button>
                    <el-table :data="processStateData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border :height="dialogTableHeight" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                        <el-table-column prop="jyCustomerProvider.name" label="供应商名称" sortable min-width="200"></el-table-column>
                        <el-table-column prop="jyCustomerProvider.address" label="地址" sortable min-width="350"></el-table-column>
                        <el-table-column prop="jyCustomerProvider.linkperson" label="联系人" sortable min-width="95"></el-table-column>
                        <el-table-column prop="jyCustomerProvider.phone" label="电话" sortable min-width="110"></el-table-column>
                        <el-table-column prop="cgunit" label="采购单价" sortable min-width="100"></el-table-column>
                        <el-table-column prop="minnums" label="最小采购量" sortable min-width="110"></el-table-column>
                        <el-table-column prop="foredate" label="采购提前期/天" sortable min-width="130"></el-table-column>
                        <el-table-column prop="period" label="付款周期" sortable min-width="100"></el-table-column>
                        <el-table-column prop="cooperationstate" label="合作状态" sortable min-width="100"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                            <template slot-scope="scope">
                                <el-button @click="updateProcessStateList(scope.row)" type="text" size="small">编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="processStateData.length"></el-pagination>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 过程状态信息 -->
        <el-dialog :title="dialogProcessStateTitle" width="750px" top="30px" :visible.sync="isProcessStateDialog" :close-on-click-modal="false" style="padding-bottom: 15px;">
            <div class="dialogProcessState" :style="dialogHeightPane">
                <el-form :inline="true" class="demo-form-inline" v-model="dialogProcessStateList" label-position="right" label-width="130px">
                    <el-form-item label="供应商名称">
                        <el-select v-model="dialogProcessStateList.providerId" :disabled="dialogProcessStateTitle==='编辑'">
                            <el-option v-for="item in customers" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="地址"><el-input v-model="dialogProcessStateList.jyCustomerProvider.address" disabled></el-input></el-form-item>
                    <el-form-item label="联系人"><el-input v-model="dialogProcessStateList.jyCustomerProvider.linkperson" disabled></el-input></el-form-item>
                    <el-form-item label="电话"><el-input v-model="dialogProcessStateList.jyCustomerProvider.phone" disabled></el-input></el-form-item>
                    <el-form-item label="传真"><el-input v-model="dialogProcessStateList.jyCustomerProvider.fax" disabled></el-input></el-form-item>
                    <el-form-item label="邮箱"><el-input v-model="dialogProcessStateList.jyCustomerProvider.email" disabled></el-input></el-form-item>
                    <el-form-item label="最小采购量"><el-input v-model="dialogProcessStateList.minnums"></el-input></el-form-item>
                    <el-form-item label="采购单价"><el-input v-model="dialogProcessStateList.cgunit"></el-input></el-form-item>
                    <el-form-item label="采购提前期/天"><el-input v-model="dialogProcessStateList.foredate"></el-input></el-form-item>
                    <el-form-item label="运输期/天"><el-input v-model="dialogProcessStateList.transportdate"></el-input></el-form-item>
                    <el-form-item label="运送方式"><el-input v-model="dialogProcessStateList.transporttype"></el-input></el-form-item>
                    <el-form-item label="开户行"><el-input v-model="dialogProcessStateList.jyCustomerProvider.bank" disabled></el-input></el-form-item>
                    <el-form-item label="账户"><el-input v-model="dialogProcessStateList.jyCustomerProvider.account" disabled></el-input></el-form-item>
                    <el-form-item label="税号"><el-input v-model="dialogProcessStateList.jyCustomerProvider.taxnums" disabled></el-input></el-form-item>
                    <el-form-item label="付款周期"><el-input v-model="dialogProcessStateList.jyCustomerProvider.period"></el-input></el-form-item>
                    <el-form-item label="建立时间">
                        <el-date-picker v-model="dialogProcessStateList.buildtime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="合作状态"><el-input v-model="dialogProcessStateList.cooperationstate"></el-input></el-form-item>
                    <el-form-item label="创建人"><el-input v-model="dialogProcessStateList.createpersonName" disabled></el-input></el-form-item>
                    <el-form-item label="创建时间"><el-input v-model="dialogProcessStateList.createtime" disabled></el-input></el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitProcessStateList" type="primary">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

    export default {
        name: "",
        data() {
            let token = sessionStorage.getItem("tokenId");
            let menuId = sessionStorage.getItem('menuId');
            return {
                tokenId: token,
                menuId: menuId,
                customers:[],
                currentPage: 1,
                pagesize: 10,
                activeName: '1',
                tableHeight: document.documentElement.clientHeight - 170,
                dataList: [],

                //基本信息
                isDialog: false,
                dialogTitle: '',
                dialogHeightPane: {
                    height: (document.documentElement.clientHeight - 180) + 'px',
                    overflowY: 'auto'
                },
                dialogTableHeight: document.documentElement.clientHeight - 260,
                dialogList: {
                    createperson: '',
                    createpersonName: '',
                    createtime: '',
                    kptype: '',
                    kpway: '',
                    managelevel: '',
                    measureunit: '',
                    name: '',
                    productcode: '',
                    productgs: '',
                    productnums: '',
                    productuse: '',
                    qualitysum: '',
                    taskcode: '',
                    tid: '',
                    totalgs: '',
                    type: '',
                    typeattribute: '',
                    unitprice: '',
                    unitpricerange: '',
                    usegs: '',
                    xcway: '',
                    xztype: '',
                },

                //过程状态信息
                isProcessStateDialog: false,
                dialogProcessStateTitle: '',
                dialogProcessStateList: {
                    buildtime: '',
                    cgunit: '',
                    cooperationstate: '',
                    createperson: '',
                    createpersonName: '',
                    createtime: '',
                    foredate: '',
                    goodsId: '',
                    id: '',
                    jyCustomerProvider: {
                        account: "",
                        address: "",
                        bank: "",
                        code: "",
                        email: "",
                        fax: '',
                        id: '',
                        invoicestartnums: '',
                        invoicesum: '',
                        linkperson: '',
                        name: '',
                        paysum: '',
                        period: '',
                        phone: '',
                        qualitysum: '',
                        startnums: '',
                        taxnums: '',
                        type: '',
                    },
                    minnums: '',
                    period: '',
                    providerId: '',
                    transportdate: '',
                    transporttype: '',
                },
                processStateData: [],

            };
        },
        created() {
            this.getData();
            this.getCustomerData();
        },
        methods: {
            getCustomerData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/jyProviderGoods/selectAllCustomerProvider?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.customers = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            getData() {
                let _this = this;
                let loading = this.$loading({
                    target: document.querySelector(".wrapper > .content-box"),
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.8)'
                });
                this.$http({
                    url: '/api/adscm/operation/jyGoods/selectAll?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.dataList = res.data.content;
                        loading.close();
                    } else {
                        _this.$message.error(res.data.desc);
                        loading.close();
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                    loading.close();
                })
            },
            insertList() {
                this.isDialog = true;
                this.dialogTitle = '添加';
                this.dialogList =  {
                    createperson: '',
                    createpersonName: '',
                    createtime: '',
                    kptype: '',
                    kpway: '',
                    managelevel: '',
                    measureunit: '',
                    name: '',
                    productcode: '',
                    productgs: '',
                    productnums: '',
                    productuse: '',
                    qualitysum: '',
                    taskcode: '',
                    tid: '',
                    totalgs: '',
                    type: '',
                    typeattribute: '',
                    unitprice: '',
                    unitpricerange: '',
                    usegs: '',
                    xcway: '',
                    xztype: '',
                };
            },
            updateList(row) {
                this.isDialog = true;
                this.dialogTitle = '编辑';
                this.activeName = '1';
                this.dialogList = row;
            },
            deleteList(row) {
                let _this = this;
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    _this.$http({
                        url: '/api/adscm/operation/jyGoods/delete/'+row.tid+'?tokenId=' + _this.tokenId,
                        method: 'post',
                        headers: {'X-Requested-With': 'XMLHttpRequest'},
                    }).then(function (res) {
                        if (res.data.statusCode == 200) {
                            _this.getData();
                        } else {
                            _this.$message.error(res.data.desc);
                        }
                    }).catch(function (catchres) {_this.$message.error("加载失败！请重新加载...");})
                }).catch(() => {});
            },
            submitList() {
                let _this = this;
                let url;
                if (_this.dialogTitle === '添加') {
                    url = '/api/adscm/operation/jyGoods/insert?tokenId=' + _this.tokenId;
                } else if (_this.dialogTitle === '编辑') {
                    url = '/api/adscm/operation/jyGoods/update?tokenId=' + _this.tokenId;
                }

                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data: _this.dialogList,
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog = false;
                        if (_this.dialogTitle === '添加') _this.getData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            //过程状态信息
            getProcessStateData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/jyProviderGoods/selectByTid/' + _this.dialogList.tid + '?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.processStateData = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            insertProcessStateList() {
                this.isProcessStateDialog = true;
                this.dialogProcessStateTitle = '添加';
                this.dialogProcessStateList = {
                    buildtime: '',
                    cgunit: '',
                    cooperationstate: '',
                    createperson: '',
                    createpersonName: '',
                    createtime: '',
                    foredate: '',
                    goodsId: this.dialogList.tid,
                    id: '',
                    jyCustomerProvider: {
                        account: "",
                        address: "",
                        bank: "",
                        code: "",
                        email: "",
                        fax: '',
                        id: '',
                        invoicestartnums: '',
                        invoicesum: '',
                        linkperson: '',
                        name: '',
                        paysum: '',
                        period: '',
                        phone: '',
                        qualitysum: '',
                        startnums: '',
                        taxnums: '',
                        type: '',
                    },
                    minnums: '',
                    period: '',
                    providerId: '',
                    transportdate: '',
                    transporttype: '',
                };
            },
            updateProcessStateList(row) {
                this.isProcessStateDialog = true;
                this.dialogProcessStateTitle = '编辑';
                this.dialogProcessStateList = row;
            },
            submitProcessStateList() {
                let _this = this;
                let url;
                if (_this.dialogProcessStateTitle === '添加') {
                    url = '/api/adscm/operation/jyProviderGoods/insert?tokenId=' + _this.tokenId;
                } else if (_this.dialogProcessStateTitle === '编辑') {
                    url = '/api/adscm/operation/jyProviderGoods/update?tokenId=' + _this.tokenId;
                }
                _this.dialogProcessStateList.buildtime = _this.timestampToTime(_this.dialogProcessStateList.buildtime);

                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data: _this.dialogProcessStateList,
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isProcessStateDialog = false;
                        if (_this.dialogProcessStateTitle === '添加') _this.getProcessStateData();
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },

            handleClick(tab, event) {
                if (tab.name === '2') {
                    this.getProcessStateData();
                }

            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
            timestampToTime(timestamp) {
                if (timestamp) {
                    let date = new Date(timestamp);
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                    return timestamp ? Y + M + D + h + m + '00' : '';
                } else {
                    return '';
                }

            },
        }
    }
</script>

<style scoped>

    #parts .el-table--small {
        font-size: 13px;
    }

    #parts .el-table .cell,
    #parts .el-table th div {
        padding-left: 0;
        padding-right: 0;
    }

    #parts .dialogProcessState .el-form,
    #parts .el-tab-pane.dialog1 .el-form {
        margin-bottom: 30px;
    }

</style>
